<template>
  <!-- loading动画 -->
  <div v-if="isLoading" class="load-mask">
    <div class="load">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>

  <!-- 机构 -->
  <div class="service">
    <div v-for="(item,index) in serviceList" style="position: relative" @click="clickServiceItem(index)" :key="index">
      <div class="service-item" v-if="item.name == '就业服务'">{{ item.name }}</div>
      <div class="service-item service-item-chuangye" v-if="item.name == '创业帮扶'">{{ item.name }}</div>
      <div class="service-item service-item-zhiye" v-if="item.name == '职业培训'">{{ item.name }}</div>
      <div class="service-item service-item-shehui" v-if="item.name == '社会保障'">{{ item.name }}</div>
      <div class="service-item service-item-laodong" v-if="item.name == '劳动维权'">{{ item.name }}</div>
      <!--点击某项显示某项对应的弹窗-->
      <div v-if="currentServiceIndex == index && oneShow" class="item-dialog"
           :style="{'border': '5px solid' + ' ' + mainColor}">
        <!--        <div @click="SelectOne"-->
        <!--             :class="'all' === currentChildrenList[currentServiceIndex] ? 'dialog-select-item':'dialog-item'">全部-->
        <!--        </div>-->
        <div v-for="(citem,cindex) in childrenList"
             :class="cindex === currentChildrenList[currentServiceIndex] && currentTwoId == citem.id? 'dialog-select-item':'dialog-item'"
             :style="{'color': mainColor}"
             @click="childrenClick(cindex)">{{
            citem.easyName
          }}
        </div>
      </div>
    </div>
  </div>

  <!-- 上海区域 -->
  <div @click="clickArea" class="area">
    {{ currentArea ? currentArea : '上海' }}
    <div v-if="areaShow" class="open-area">
      <div v-for="(item,index) in areaList" :class="item == currentArea  ?'area-select-item': 'area-item'" :key="index"
           :style="item == '上海'?'width:100px;background-color:#ccc':''"
           @click="selectArea(index)">
        {{ item }}
      </div>
    </div>
  </div>

  <!-- 地图 -->
  <div id="container" @click="clickMap">

  </div>

  <!-- 惠企大礼包 -->
  <a class="out-link" target="_blank"
     href="https://filed0fe12fb66b6.v4.h5sys.cn/play/5b1izH2x?suid=cnbcseq20vme31jpvc6g&sl=0">
    <div class="out-link-inner">惠民政策</div>
  </a>


  <!-- 活动 -->
  <div class="activity">
    <div @click="showActivity" class="activity-inner">活动预告</div>
    <div v-if="activityShow" class="activity-dialog">
      <div @click="selectActivity(index)" v-for="(item,index) in activetyList"
           :class="currentActivityIndex == index && activityId ?'dialog-select-item': 'dialog-item'">{{ item.name }}
      </div>
    </div>
  </div>

  <!--点击公共职介二级菜单 显示弹窗 来显示公共职介的数量 -->
  <el-dialog
      v-model="isShowNumDialog"
      title="提示"
      width="300"
      :before-close="handleClose"
  >
    <span>{{ "⽬前全市提供公共职业介绍服务地点共计" + showNum + "个，详细地址⻅地图" }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="isShowNumDialog = false">
          我知道了
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import axios from "axios";
import {getServiceList, getPoints, getActivityTypeList, getActivityPoints} from "@/api/department"
import {ref, onMounted, onUnmounted} from "vue";

const theme = ref({
  color: '#fff'
})

function clickMap() {
  console.log("点击了地图！！")
}

// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, bgUrl, obj) {
  this._bgUrl = bgUrl;
  this._point = point;
  this._text = text;
  this._obj = obj;
}

ComplexCustomOverlay.prototype = new BMapGL.Overlay();

ComplexCustomOverlay.prototype.initialize = function (map) {
  this._map = map;
  var pixel = map.pointToOverlayPixel(this._point, {
    useRound: false,   // 设置此参数，防止抖动
    fixPosition: true  // 覆盖物跨越180时修正位置
  });


  //主体设置背景图片
  var div = this._div = document.createElement("div");
  // div.style.background = "url(" + new URL(`${this._bgUrl}`, import.meta.url).href + ")";
  // div.style.backgroundPosition = "center";
  // div.style.backgroundSize = "cover";
  div.style.position = "absolute";
  div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
  div.style.width = `3.5rem`;
  div.style.height = "3.5rem";
  div.style.color = "white";
  div.style.textAlign = "center";
  div.style.fontSize = "0.7rem";
  div.style.display = "flex";
  // div.style.flexDirection="column";
  div.style.justifyContent = "center";
  div.style.alignItems = "center";
  div.style.fontWeight = "700";
  div.style.padding = "2px";


  var div1 = document.createElement("div");
  var div2 = document.createElement("div");
  var div3 = document.createElement("div");


  div.appendChild(div1);
  div1.appendChild(div2);
  div2.appendChild(div3);

  div1.style.width = "3.5rem";
  div1.style.height = "3rem";
  div1.style.overflow = "hidden";
  div1.style.transform = "rotate(120deg)";


  div2.style.width = "100%";
  div2.style.height = "100%";
  div2.style.overflow = "hidden";
  div2.style.transform = "rotate(-60deg)";


  div3.style.width = "100%";
  div3.style.height = "100%";
  div3.style.overflow = "hidden";
  div3.style.transform = "rotate(-60deg)";
  div3.style.background = `${this._obj.color ? this._obj.color : "#f79a57"}`;


  //内部文字  渲染为传入的text
  var span = this._span = document.createElement("span");
  span.style.position = 'absolute'
  div.appendChild(span);
  span.appendChild(document.createTextNode(this._text ? this._text : activityObj.value.name));
  // var that = this;


// 创建信息窗口
  var opts = {
    closeOnClick: false
  };


  // src="${this._obj.img_src}"
  //
  //鼠标移入事件
  div.onclick = (e) => {
    console.log("点击", this._obj)

    //标记点弹窗内容
    let content1 = ` <div class="info-dailog">
                            <div class="info-type">
                              <span style="position: absolute;z-index: 700"> ${this._obj.easyName ? this._obj.easyName : activityObj.value.name}</span>
                             <div class="first">
                               <div class="two">
                                    <div class="three" style="background: ${this._obj.color ? this._obj.color : '#f79a57'}">
                                   </div>
                             </div>
                             </div>
                         </div>
                         <img class="info-img"  src="${new URL(this._obj.img_src ? this._obj.img_src : '../assets/fix.png', import.meta.url).href}">
                         <br><div class="info-title">${this._obj.name}</div>
                         <br>
                         <div class="info-detail">
                            <span style="word-break: break-all;display: inline-block;">地址: ${this._obj.address}</span>
                         </div>
                          <button id="location">到这里去</button>
                       </div>`;

    let content2 = ` <div class="info-dailog">
                            <div class="info-type">
                              <span style="position: absolute;z-index: 700"> ${this._obj.easyName ? this._obj.easyName : activityObj.value.name}</span>
                             <div class="first">
                               <div class="two">
                                    <div class="three" style="background: ${this._obj.color ? this._obj.color : '#f79a57'}">
                                   </div>
                             </div>
                             </div>
                         </div>

                         <img class="info-img"  src="${new URL(this._obj.img_src ? this._obj.img_src : '../assets/fix.png', import.meta.url).href}">
                         <br><div class="info-title">${this._obj.name}</div>
                         <br>
                            <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">地址: ${this._obj.address}</span>
                            </div>
                            <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">开始时间: ${this._obj.start_date}</span>
                            </div>
                             <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">结束时间: ${this._obj.end_date}</span>
                            </div>
                                     <button id="location">到这里去</button>
                            </div>

<!--                          <a style="background-color:pink;display: inline-block;width: 100px;height: 30px" href="https://www.baidu.com/">到这去</a>-->
                       </div>`;

    let infoWindow
    if (activityId.value) {
      infoWindow = new BMapGL.InfoWindow(content2, opts);
    } else {
      infoWindow = new BMapGL.InfoWindow(content1, opts);
    }


    console.log(this._obj, "打开窗的点")


    map.openInfoWindow(infoWindow, this._point); // 开启信息窗口

    console.log("无效吗")
    setTimeout(() => {
      // 获取按钮元素

      let element = document.getElementById('location');
      let imgEle = document.querySelector(".info-img")

      // 绑定点击事件处理程序
      element.addEventListener('touchstart', () => {
        console.log("触发了点击事件！");
        window.location.href = `https://uri.amap.com/marker?position=${this._obj.longitude},${this._obj.latitude}`
        // 在此处编写需要执行的操作
      });

      if (this._obj.img_link) {
        imgEle.addEventListener('touchstart', () => {

          window.location.href = this._obj.img_link

          // 在此处编写需要执行的操作
        });
        imgEle.addEventListener('click', () => {
          window.location.href = this._obj.img_link
          // 在此处编写需要执行的操作
        });
      }

      // 绑定点击事件处理程序
      element.addEventListener('click', () => {
        window.location.href = `https://uri.amap.com/marker?position=${this._obj.longitude},${this._obj.latitude}`
        // 在此处编写需要执行的操作
      });
    }, 500)


    infoWindow.disableCloseOnClick()


  }

  // div.onmouseout = function(){
  //   this.style.backgroundColor = "#EE5D5B";
  //   this.style.borderColor = "#BC3B3A";
  //   this.getElementsByTagName("span")[0].innerHTML = that._text;
  // }

  map.getPanes().labelPane.appendChild(div);

  return div;
}

//画出图形
ComplexCustomOverlay.prototype.draw = function () {
  var map = this._map;
  var pixel = map.pointToOverlayPixel(this._point);
  this._div.style.left = pixel.x + "px"
  this._div.style.top = pixel.y - 30 + "px";
}

var map;


const zoom = ref() //地图的缩放级别


onMounted(() => {

  //组件加载时候 先去获取附近定位
//弹出获取位置弹窗，获得当前用户的经纬度
  let geolocation = new BMapGL.Geolocation();
  isLoading.value = true
  geolocation.getCurrentPosition(
      function (r) {

        map = new BMapGL.Map("container"); // 创建地图实例
        const point = new BMapGL.Point(r.point.lng, r.point.lat); // 创建点坐标
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        map.setHeading(0); //设置地图旋转角度
        map.setTilt(0); //设置地图的倾斜角度
        map.enableScrollWheelZoom();
        map.setMinZoom(10)
        map.setMaxZoom(20)

        //获取到附近定位的时候再去加载首屏标点数据
        //首屏幕获取标点数组
        getPoints({}).then(res => {
          points.value = res
          //循环渲染标点
          points.value.forEach(item => {
            if (item.longitude) { //如果有经纬度才渲染覆盖物
              //实例化一个标点 这边还要根据标点的类型去替换背景图片
              var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(item.longitude, item.latitude), item.easyName, "../assets/blue.svg", item);
            }
            //添加到地图上
            map.addOverlay(myCompOverlay);

          })
          isLoading.value = false
        })


        // 监听地图层级
        map.addEventListener("zoomend", function (e) {
          zoom.value = map.getZoom()
          console.log(parseInt(zoom.value))
          if (parseInt(zoom.value) == 12 || parseInt(zoom.value) == 11) {
            console.log("落再哪里")
            map.clearOverlays()
            //循环渲染标点
            points.value.forEach(item => {
              if (item.longitude) { //如果有经纬度才渲染覆盖物
                //实例化一个标点 这边还要根据标点的类型去替换背景图片
                var marker = new BMapGL.Marker(new BMapGL.Point(item.longitude, item.latitude));
              }

              marker.addEventListener("click", function () {

                // 创建信息窗口
                var opts = {
                  closeOnClick: false
                };
                //标记点弹窗内容
                let content = ` <div class="info-dailog">
                        <div class="info-type">
                              <span style="position: absolute;z-index: 700"> ${item.easyName ? item.easyName : activityObj.value.name}</span>
                             <div class="first">
                               <div class="two">
                                    <div class="three" style="background: ${item.color ? item.color : '#f79a57'}">
                                   </div>
                             </div>
                             </div>
                         </div>
                         <img class="info-img"  src="${new URL(item.img_src ? item.img_src : '../assets/fix.png', import.meta.url).href}">
                         <br><div class="info-title">${item.name}</div>
                         <br>
                        <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">地址: ${item.address}</span>
                        </div>
                          <button id="location">到这里去</button>
                        </div>`;

                let content2 = ` <div class="info-dailog">
                        <div class="info-type">
                              <span style="position: absolute;z-index: 700"> ${item.easyName ? item.easyName : activityObj.value.name}</span>
                             <div class="first">
                               <div class="two">
                                    <div class="three" style="background: ${item.color ? item.color : '#f79a57'}">
                                   </div>
                             </div>
                             </div>
                         </div>
                        <img class="info-img"  src="${new URL(item.img_src ? item.img_src : '../assets/fix.png', import.meta.url).href}">
                         <br><div class="info-title">${item.name}</div>
                         <br>
                        <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">地址: ${item.address}</span>
                            </div>
                            <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">开始时间: ${item.start_date}</span>
                            </div>
                             <div class="info-detail">
                                <span style="word-break: break-all;display: inline-block;">结束时间: ${item.end_date}</span>
                            </div>
                          <button id="location">到这里去</button>
                        </div>`;


                let infoWindow
                if (activityId.value) {
                  infoWindow = new BMapGL.InfoWindow(content2, opts);
                } else {
                  infoWindow = new BMapGL.InfoWindow(content, opts);
                }
                console.log(infoWindow, "打开窗的点")
                map.openInfoWindow(infoWindow, new BMapGL.Point(item.longitude, item.latitude)); // 开启信息窗口
                setTimeout(() => {
                  // 获取按钮元素

                  let element = document.getElementById('location');
                  let imgEle = document.querySelector(".info-img")
                  // 绑定点击事件处理程序
                  element.addEventListener('touchstart', () => {
                    console.log("触发了点击事件！");
                    window.location.href = `https://uri.amap.com/marker?position=${item.longitude},${item.latitude}`
                    // 在此处编写需要执行的操作
                  });

                  console.log("图片可以点击吗", item.img_link)
                  if (item.img_link) {
                    imgEle.addEventListener('touchstart', () => {
                      window.location.href = item.img_link
                      // 在此处编写需要执行的操作
                    });
                    imgEle.addEventListener('click', () => {
                      window.location.href = item.img_link
                      // 在此处编写需要执行的操作
                    });
                  }


                  // 绑定点击事件处理程序
                  element.addEventListener('click', () => {
                    window.location.href = `https://uri.amap.com/marker?position=${item.longitude},${item.latitude}`
                    // 在此处编写需要执行的操作
                  });
                }, 500)
                // map.centerAndZoom(new BMapGL.Point(item.longitude, item.latitude), 13)
                infoWindow.disableCloseOnClick()
              })

              //添加到地图上
              map.addOverlay(marker);
            })

          }

          if (parseInt(zoom.value) == 13 || parseInt(zoom.value) == 14) {
            map.clearOverlays()

            //循环渲染标点
            points.value.forEach(item => {
              if (item.longitude) { //如果有经纬度才渲染覆盖物
                //实例化一个标点 这边还要根据标点的类型去替换背景图片
                var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(item.longitude, item.latitude), item.easyName, "../assets/blue.svg", item);
              }
              //添加到地图上
              map.addOverlay(myCompOverlay);
            })
          }
        });

      },
      {enableHighAccuracy: true}
  )


});


const oneShow = ref(false)

const childrenList = ref([])

const currentServiceIndex = ref(null)
const currentChildrenList = ref([])


//显示左上角的一级服务列表
const serviceList = ref([])

async function toGetServiceList() {
  let res = await getServiceList()
  serviceList.value = res
  //生成一个和一级列表一样长的null数组
  for (let i = 0; i < serviceList.value.length; i++) {
    currentChildrenList.value.push(null)
  }
  console.log(currentChildrenList.value)
}

toGetServiceList()


const mainColor = ref("") //当前的主体颜色

//点击某项服务
function clickServiceItem(index) {

  if (index == currentServiceIndex.value && oneShow.value == true) {
    console.log(currentServiceIndex.value, index, oneShow.value, "进去这里了吗")
    oneShow.value = false
  } else {
    oneShow.value = true
  }
  //点击了服务后就吧activityId置为空
  activityId.value = null

  areaShow.value = false
  activityShow.value = false

  //计算dialog的颜色
  switch (serviceList.value[index].name) {
    case '就业服务' :
      mainColor.value = "#8f59f0"
      theme.value.color = '#8f59f0'
      break;
    case '创业帮扶' :
      mainColor.value = "#F09B5D"
      theme.value.color = '#F09B5D'
      break;
    case '职业培训' :
      mainColor.value = "#6EDC53"
      theme.value.color = '#6EDC53'
      break;
    case '社会保障' :
      mainColor.value = "#4eadea"
      theme.value.color = "#4eadea"
      break;
    case '劳动维权' :
      mainColor.value = "#FC6A3C"
      theme.value.color = "#FC6A3C"
      break;
  }


  currentServiceIndex.value = index
  childrenList.value = serviceList.value[index].children;
  // }
}

const currentTwoId = ref(null)

const currentTwoName = ref("")


const isShowNumDialog = ref(false)
const showNum = ref(0) //显示的公共职介的数量

//点击二级分类中的某项
async function childrenClick(cindex) {
  console.log(serviceList.value[currentServiceIndex.value].children[cindex].id, "查询分类id")
  currentTwoId.value = serviceList.value[currentServiceIndex.value].children[cindex].id  //二级id查询条件
  currentTwoName.value = serviceList.value[currentServiceIndex.value].children[cindex].name  //选中的二级分类名
  currentChildrenList.value.splice(currentServiceIndex.value, 1, cindex) //更新二级分类选中的判定数组


  //重新渲染地图点
  let res = await getPoints({
    district_name: currentArea.value == '上海' ? "" : currentArea.value,
    cate_id: currentTwoId.value
  })
  console.log(currentServiceIndex.value, "选中二级时候的一级")


  //如果选中了公共职介这个二级分类 显示数量弹窗
  // if (serviceList.value[currentServiceIndex.value].children[cindex].easyName == "公共职介") {
  //   isShowNumDialog.value = true
  //   currentArea.value = '上海'
  //   showNum.value = res.length
  // }

  points.value = res

  map.clearOverlays()
  //循环渲染标点
  points.value.forEach(item => {
    if (item.longitude) {
      //实例化一个标点 这边还要根据标点的类型去替换背景图片
      var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(item.longitude, item.latitude), item.easyName, "../assets/blue.svg", item);

      //添加到地图上
      map.addOverlay(myCompOverlay);
    }
  })

  oneShow.value = false
  console.log(oneShow.value, "是否不显示了")

  console.log(currentTwoId.value, "二级分类选中")
  console.log(currentServiceIndex.value, "一级分类选中")
}

//点击弹窗中的全部拿到查询的一级分类id
function SelectOne() {
  console.log(serviceList.value[currentServiceIndex.value], "查询分类id")
  currentChildrenList.value.splice(currentServiceIndex.value, 1, "all") //选择全部在二级选中数组中添加
}


const areaShow = ref(false) //区域弹窗是否显示

const currentArea = ref("")

//上海区域数组
const areaList = ref(["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区", "上海"])


//点击了上海某个区
function selectArea(index: any) {
  isLoading.value = true
  currentArea.value = areaList.value[index]
  var myGeo = new BMapGL.Geocoder();
  myGeo.getPoint(currentArea.value, async function (point) {
    if (point) {
      map.centerAndZoom(point, 14)
      // map.addOverlay(new BMapGL.Marker(point, {title: currentArea.value}))
      let res = await getActivityPoints({
        cate_id: activityId.value,
        district_name: currentArea.value == '上海' ? "" : currentArea.value,
      })

      if (activityId.value) {

      } else {
        // cate_id: currentTwoId.value
        let res = await getPoints({
          district_name: currentArea.value == '上海' ? "" : currentArea.value,
          cate_id: currentTwoId.value
        })
        console.log(res, "标点")
        points.value = res
      }


      map.clearOverlays()
      //循环渲染标点
      points.value.forEach(item => {
        console.log(item.name, "每个")
        if (item.longitude) {
          //实例化一个标点 这边还要根据标点的类型去替换背景图片
          var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(item.longitude, item.latitude), item.easyName, "../assets/blue.svg", item);

          //添加到地图上
          map.addOverlay(myCompOverlay);
        }
      })


    } else {
      alert('您选择的地址没有解析到结果！');
    }
  }, '上海市')

  setTimeout(() => {
    isLoading.value = false
  }, 100)
}

function clickArea() {
  areaShow.value = !areaShow.value
  activityShow.value = false
  oneShow.value = false
}


const isLoading = ref(false)


//活动
const activetyList = ref([])

// 获取活动类型列表
async function toGetActivityTypeList() {
  let res = await getActivityTypeList()
  activetyList.value = res
}

toGetActivityTypeList()

const activityShow = ref(false) //活动二级菜单是否显示

function showActivity() {
  activityShow.value = !activityShow.value
  areaShow.value = false
  oneShow.value = false
}


const currentActivityIndex = ref(null) //当前活动下标

const activityId = ref(null)

const activityObj = ref(null)

function selectActivity(index) {
  currentActivityIndex.value = index
  console.log(activetyList.value[index], "选中某个活动")
  activityId.value = activetyList.value[index].id
  activityShow.value = false
  activityObj.value = activetyList.value[index]
  //查询对应的标点列表
  getActivityPoints({
    cate_id: activityId.value,
    district_name: currentArea.value == '上海' ? "" : currentArea.value,
  }).then((res) => {
    //清除覆盖物
    map.clearOverlays()
    //渲染标点

    points.value = res

    //循环渲染标点
    points.value.forEach(item => {
      //实例化一个标点 这边还要根据标点的类型去替换背景图片
      var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(item.longitude, item.latitude), item.easyName, "../assets/blue.svg", item);

      //添加到地图上
      map.addOverlay(myCompOverlay);
    })
  })


}


//渲染标记点
const points = ref([])


onUnmounted(() => {
  map.destroy()
});

</script>


<style lang="scss">
// img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"]
//{
//  height:0 !important;
//  display: none;
//}


//每个标记点的信息窗口
.info-dailog {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 300px;
  height: 100%;
  position: relative;
  padding-bottom: 15px;

  .info-type {
    position: absolute;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 14px;
    width: 55px;
    height: 55px;
    text-align: center;
    left: 10px;
    top: 5px;
    z-index: 600;
    //background: url("@/assets/yellow.svg") no-repeat;
    background-position: center;
    background-size: contain;
    //transform: rotate(90deg);
    .first {
      width: 55px;
      height: 70px;
      overflow: hidden;
      transform: rotate(120deg);

      .two {
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);

        .three {
          width: 100%;
          height: 100%;
          overflow: hidden;
          transform: rotate(-60deg);
          background: red;
        }
      }
    }


  }

  #location {
    width: 270px;
    word-break: break-all;
    margin: 10px auto;
    margin-top: 0;
  }

  .info-title {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    color: #000;
    width: 270px;
    word-break: break-all;
    margin: 5px auto;
  }

  .info-img {
    width: 270px;
    height: 170px;
    margin: 0 auto;
    //margin-top: 0px;
  }

  .info-detail {
    font-size: 16px;
    display: flex;
    width: 270px;
    margin: 5px auto;
    line-height: 18px;

    .info-label {
      color: #646464;
      width: 50px;
    }

    .info-value {
      color: #333;
    }
  }

}

</style>

<style lang="scss" scoped>
#container {
  width: 100vw;
  height: 100vh;
}

::v-deep .BMap_bubble_top {
  //height: 10px !important;
}

//
::v-deep .BMap_bubble_pop {
  //padding: 4px 10px !important;
  //background: rgba(143, 89, 240, 0.6) !important;
  //border: #8f59f0 solid 1px !important;
}

::v-deep .BMap_bubble_title {
  //width: auto !important;
  //color: white !important;
  //font-size: 12px;
  //font-weight: bold;
  //text-align: left;
  //padding-left: 5px;
  //border-top-left-radius: 10px;
  //border-top-right-radius: 10px;
  ////background: rgba(143, 89, 240, 0.6) !important;
  //opacity: 0;
  //height: 0 !important;
}

//
::v-deep .BMap_bubble_content {
  width: 300px !important;
  //left: 50%;
  //transform: translateX(-50%);
  //height: auto !important;
  //line-height: 14px !important;
  //font-size: 14px !important;
  //overflow: hidden !important;
  display: flex;
  justify-content: center;
}

//
::v-deep .BMap_bubble_center {
  //width: 300px !important;
  display: flex;
  justify-content: center;
  //line-height: 14px !important;
}

.info-img {
  width: 100%;
  height: 200px;
}

.area {
  font-size: 0.85rem;
  position: relative;
  position: absolute;
  right: 5px;
  top: 20px;
  z-index: 200;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 25px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
  background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
  border: 5px solid #8f59f0;
  padding: 5px;

  .open-area {
    position: absolute;
    right: 80px;
    top: 0;
    display: flex;
    background-color: rgba(255, 255, 255, 0.4);
    border: 5px solid #8f59f0;
    border-radius: 15px;
    width: 30vw;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;

    .area-item {
      width: 50px;
      height: 50px;
      font-size: 14px;
      border-radius: 50%;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      line-height: 25px;
      color: #000;
      font-weight: 700;
      //text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
      //background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
      //border: 5px solid #8f59f0;
      background-color: #fff;
      text-shadow: none;
      padding: 5px;
    }

    .area-select-item {
      width: 50px;
      height: 50px;
      font-size: 14px;
      border-radius: 50%;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      line-height: 25px;
      color: #fff;
      font-weight: 700;
      text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
      background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
      //border: 5px solid #8f59f0;
      padding: 5px;
    }

  }
}

.service {
  position: absolute;
  left: 5px;
  top: 20px;
  z-index: 200;


  .item-dialog {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    padding: 10px 10px;
    left: 80px;
    top: 0;
    background-color: rgba(255, 255, 255, 0.4);
    border: 5px solid #8f59f0;
    width: 25vw;
    border-radius: 15px;

    .close {
      //position: absolute;
      //right: 0
      margin: 0 auto;
    }

    .dialog-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      width: 120px;
      height: 40px;
      text-shadow: none;
      color: #8f59f0;
      line-height: 15px;
      font-weight: 500;
      margin: 5px 10px;
      background-color: #fff;
      box-shadow: 0px 0px 0px #D2DCFF;
      border-radius: 15px;
      color: #ccc;
    }

    .dialog-select-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      width: 120px;
      height: 40px;
      text-shadow: none;
      color: #fff !important;
      line-height: 15px;
      font-weight: 500;
      margin: 5px 10px;
      //background-color: rgba(var(--bgcolor), 0.7);
      background-color: v-bind('theme.color');
      box-shadow: 0px 0px 0px #D2DCFF;
      border-radius: 15px;
    }
  }


  .service-item {
    width: 50px;
    height: 50px;
    font-size: 17px;
    border-radius: 50%;
    margin: 5px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 25px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
    background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
    border: 5px solid #8f59f0;
    padding: 5px;


  }

  .service-item-chuangye {
    border: 5px solid #f79a57;
    //background: linear-gradient(200deg, #F09B5D, #EEECB5, #F2EAF2);
    //text-shadow: 0 -2px #F09B5D, 2px -2px #F09B5D, 2px 0 #F09B5D, 2px 2px #F09B5D, 0 2px #F09B5D, -2px 2px #F09B5D, -2px 0 #F09B5D, -2px -2px #F09B5D;
  }

  .service-item-zhiye {
    border: 5px solid #03a268;
    //background: linear-gradient(200deg, #3EFC0E, #67EE37, #FFFFFF);
    //text-shadow: 0 -2px #6EDC53, 2px -2px #6EDC53, 2px 0 #6EDC53, 2px 2px #6EDC53, 0 2px #6EDC53, -2px 2px #6EDC53, -2px 0 #6EDC53, -2px -2px #6EDC53;
  }


  .service-item-shehui {
    border: 5px solid #4eadea;
    //background: linear-gradient(200deg, #F4EA2A, #FFFBA1, #FFEEB0);
    //text-shadow: 0 -2px #F4EA2A, 2px -2px #F4EA2A, 2px 0 #F4EA2A, 2px 2px #F4EA2A, 0 2px #F4EA2A, -2px 2px #F4EA2A, -2px 0 #F4EA2A, -2px -2px #F4EA2A;
  }

  .service-item-laodong {
    border: 5px solid #e60101;
    //background: linear-gradient(200deg, #FC6A3C, #F8D4B3, #fff);
    //text-shadow: 0 -2px #FC6A3C, 2px -2px #FC6A3C, 2px 0 #FC6A3C, 2px 2px #FC6A3C, 0 2px #FC6A3C, -2px 2px #FC6A3C, -2px 0 #FC6A3C, -2px -2px #FC6A3C;
  }


}

.load-mask {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 800;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
  justify-content: center;
  align-items: center;

  .load {
    .line {
      display: inline-block;
      width: 15px;
      height: 20px;
      border-radius: 15px;
      background-color: #8f59f0;
    }
  }

  .load .line:nth-last-child(1) {
    animation: loadingA 1.5s 1s infinite;
  }

  .load .line:nth-last-child(2) {
    animation: loadingA 1.5s 0.5s infinite;
  }

  .load .line:nth-last-child(3) {
    animation: loadingA 1.5s 0s infinite;
  }
}

.out-link {
  position: absolute;
  left: 10px;
  bottom: 40px;
  display: flex;
  z-index: 400;

  .out-link-inner {
    width: 50px;
    height: 50px;
    font-size: 0.85rem;
    border-radius: 50%;
    margin: 5px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 25px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
    background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
    border: 5px solid #8f59f0;
    padding: 5px;
  }

}

//活动
.activity {
  position: relative;
  position: absolute;
  right: 10px;
  bottom: 40px;
  display: flex;
  z-index: 400;

  .activity-inner {
    font-size: 14px;
    width: 50px;
    height: 50px;
    font-size: 14px;
    border-radius: 50%;
    margin: 5px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 25px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 -2px #8f59f0, 2px -2px #8f59f0, 2px 0 #8f59f0, 2px 2px #8f59f0, 0 2px #8f59f0, -2px 2px #8f59f0, -2px 0 #8f59f0, -2px -2px #8f59f0;
    background: linear-gradient(200deg, #f1b3b0, #f79df5, #45ddaf);
    border: 5px solid #8f59f0;
    padding: 5px;
  }

  .activity-dialog {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    padding: 10px 10px;
    right: 90px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.4);
    border: 5px solid #8f59f0;
    width: 130px;
    border-radius: 15px;

    .dialog-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      width: 120px;
      height: 40px;
      text-shadow: none;
      color: #8f59f0;
      line-height: 15px;
      font-weight: 500;
      margin: 5px 10px;
      background-color: #fff;
      box-shadow: 0px 0px 0px #D2DCFF;
      border-radius: 15px;
    }

    .dialog-select-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      width: 120px;
      height: 40px;
      text-shadow: none;
      color: #fff;
      line-height: 15px;
      font-weight: 500;
      margin: 0 10px;
      background-color: rgba(#8f59f0, 0.7);
      box-shadow: 0px 0px 0px #D2DCFF;
      border-radius: 15px;
    }
  }
}

@keyframes loadingA {
  0% {
    height: 20px;
  }
  50% {
    height: 45px;
  }
  100% {
    height: 20px;
  }
}
</style>
